<template>
  <div class="infectious-order-detail">
    <div class="layout">
      <section class="top">
        <h2 class="top-title">转运申请单</h2>
        <section class="first section">
          <section class="row">
            <section class="column column2">
              <span class="first-column">申请日期</span>
              <span>{{infectiousOrderDetail.applyTime}}</span>
            </section>
            <section class="column">
              <span>转运日期</span>
              <span>{{infectiousOrderDetail.transferTime}}</span>
            </section>
          </section>
          <section class="row">
            <section class="column column2">
              <span class="first-column">转出医院</span>
              <span class="from-hospital">{{infectiousOrderDetail.fromHospital}}</span>
            </section>
            <section class="column">
              <span>联系人</span>
              <span>{{infectiousOrderDetail.fromConnector}}</span>
            </section>
            <section class="column">
              <span>联系电话</span>
              <span>{{infectiousOrderDetail.fromConnectPhone}}</span>
            </section>
          </section>
          <section class="row">
            <section class="column column2">
              <span class="first-column">接收医院</span>
              <span class="to-hospital">{{infectiousOrderDetail.toHospital}}</span>
            </section>
            <section class="column">
              <span>联系人</span>
              <span>{{infectiousOrderDetail.toConnector}}</span>
            </section>
            <section class="column">
              <span>联系电话</span>
              <span>{{infectiousOrderDetail.toConnectPhone}}</span>
            </section>
          </section>
        </section>
        <section class="second section">
          <section class="row">
            <section class="column column2">
              <span class="first-column">患者姓名</span>
              <span class="patient-name">{{infectiousOrderDetail.patientName}}</span>
              <div class="sex-radio">
                <el-radio v-model="infectiousOrderDetail.sex" label="男">男</el-radio>
                <el-radio v-model="infectiousOrderDetail.sex" label="女">女</el-radio>
              </div>
              <span class="age">{{infectiousOrderDetail.age}}</span>
            </section>
            <section class="column">
              <span>就诊日期</span>
              <span>{{infectiousOrderDetail.treamentTime}}</span>
            </section>
            <section class="column">
              <span>身份证号</span>
              <span>{{infectiousOrderDetail.IDCard}}</span>
            </section>
          </section>
          <section class="row">
            <section class="column">
              <span class="first-column">地址</span>
              <span>{{infectiousOrderDetail.address}}</span>
            </section>
            <section class="column">
              <span>联系方式</span>
              <span>{{infectiousOrderDetail.telephone}}</span>
            </section>
            <section class="column">
              <span>家属联系人</span>
              <span>{{infectiousOrderDetail.familyMember}}</span>
            </section>
            <section class="column">
              <span>电话</span>
              <span>{{infectiousOrderDetail.familyPhone}}</span>
            </section>
          </section>
          <section class="row">
            <section class="column column4">
              <span class="first-column">医保类型</span>
              <div>
                <el-radio
                  v-model="infectiousOrderDetail.medicalType"
                  :label="item.id"
                  v-for="(item,index) of medicalTypeList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
          </section>
        </section>
        <section class="third section">
          <section class="row">
            <section class="column column2">
              <span class="first-column">诊断类型</span>
              <div>
                <el-radio
                  v-model="infectiousOrderDetail.diagnosisType"
                  :label="item.id"
                  v-for="(item,index) of diagnosisList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
            <section class="column column2">
              <span>临床分型</span>
              <div>
                <el-radio
                  v-model="infectiousOrderDetail.clinicalType"
                  :label="item.id"
                  v-for="(item,index) of clinicalList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
          </section>
          <section class="row">
            <section class="column column2">
              <span class="ncp-test-result-title">新冠肺炎检测结果</span>
              <div>
                <el-radio v-model="infectiousOrderDetail.NCPTestResult" label="1">阴性</el-radio>
                <el-radio v-model="infectiousOrderDetail.NCPTestResult" label="2">阳性</el-radio>
                <el-radio v-model="infectiousOrderDetail.NCPTestResult" label="0">未测</el-radio>
              </div>
            </section>
            <section class="column column2">
              <span class="confirm-hospital-title">确诊机构名称</span>
              <span>{{infectiousOrderDetail.confirmHospital}}</span>
            </section>
          </section>
        </section>
        <section class="four section">
          <section class="row">
            <section class="column column2">
              <span class="is-travel-title">发病前14天，是否有武汉居住或旅游史</span>
              <div>
                <el-radio v-model="infectiousOrderDetail.isTravel" label="1">是</el-radio>
                <el-radio v-model="infectiousOrderDetail.isTravel" label="2">否</el-radio>
              </div>
            </section>
            <section class="column column2">
              <span class="is-contact-title">发病前14天，是否有新冠肺炎确诊病例接触史</span>
              <div>
                <el-radio v-model="infectiousOrderDetail.isContact" label="1">是</el-radio>
                <el-radio v-model="infectiousOrderDetail.isContact" label="2">否</el-radio>
              </div>
            </section>
          </section>
          <section class="row">
            <section class="column column2">
              <span class="day-title">从接触至发病时间天数</span>
              <span>{{infectiousOrderDetail.day}}</span>
            </section>
            <section class="column column2">
              <span class="is-worker-title">是否为医疗工作人员</span>
              <div>
                <el-radio v-model="infectiousOrderDetail.isWorker" label="1">是</el-radio>
                <el-radio v-model="infectiousOrderDetail.isWorker" label="2">否</el-radio>
              </div>
            </section>
          </section>
          <section class="row">
            <section class="column column4">
              <span class="first-column">简要病史</span>
              <span class="disease-history">{{infectiousOrderDetail.diseaseHistory}}</span>
            </section>
          </section>
        </section>
        <section class="five section">
          <section class="row">
            <section class="column column4">
              <span class="first-column">体格检查</span>
              <div class="check-body">
                <span>T:{{infectiousOrderDetail.temperature}}℃</span>
                <span>P:{{infectiousOrderDetail.pulse}}次/分</span>
                <span>R:{{infectiousOrderDetail.breath}}次/分</span>
                <span>BP:{{infectiousOrderDetail.diastolic}}/{{infectiousOrderDetail.systolic}}mmHg</span>
                <span>SpO:{{infectiousOrderDetail.saturation}}%</span>
              </div>
            </section>
          </section>
          <section class="row">
            <section class="column column2">
              <span class="first-column">神志</span>
              <div>
                <el-radio
                  v-model="infectiousOrderDetail.mind"
                  :label="item.id"
                  v-for="(item,index) of mindList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
            <section class="column column2">
              <span class="xorct-result-title">胸部X线或CT结果</span>
              <span>{{infectiousOrderDetail.XOrCTResult}}</span>
            </section>
          </section>
        </section>
        <section class="six section">
          <section class="row">
            <section class="column column2">
              <span class="first-column">静脉输液</span>
              <div class="is-iv-infuse">
                <el-radio v-model="infectiousOrderDetail.isInfusion" label="1">有</el-radio>
                <el-radio v-model="infectiousOrderDetail.isInfusion" label="2">无</el-radio>
              </div>
              <div>
                <el-radio
                  v-model="infectiousOrderDetail.infusionType"
                  :label="item.id"
                  v-for="(item,index) of infuseWayList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
            <section class="column">
              <span>心电监护</span>
              <div>
                <el-radio v-model="infectiousOrderDetail.isECGMonitor" label="1">有</el-radio>
                <el-radio v-model="infectiousOrderDetail.isECGMonitor" label="2">无</el-radio>
              </div>
            </section>
          </section>
          <section class="row">
            <section class="column column4">
              <span class="first-column">给氧方式</span>
              <div class="give-oxy-way-radio">
                <el-radio
                  v-model="infectiousOrderDetail.giveOxyWay"
                  :label="item.id"
                  v-for="(item,index) of giveOxyWayList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
          </section>
        </section>
      </section>
      <keep-alive>
        <component :is="footer" :transferOrderDetail="infectiousOrderDetail"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import TransferOrderFinishFooter from "./TransferOrderFinishFooter";
import TransferOrderUpFooter from "./TransferOrderUpFooter";
export default {
  name: "InfectiousOrderDetail",
  data() {
    return {
      infectiousOrderDetail: {},
      footer: TransferOrderFinishFooter,
      medicalTypeList: "",
      diagnosisList: "",
      clinicalList: "",
      mindList: "",
      cs:1
    };
  },
  methods: {
    GetMedicalTypeList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetMedicalTypeList",
        }),
        method: "post",
      }).then((res) => {
        console.log("GetMedicalTypeList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.medicalTypeList = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求医保类型列表失败");
        }
      });
    },
    GetDiagnosisList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetDiagnosisList",
        }),
        method: "post",
      }).then((res) => {
        console.log("GetDiagnosisList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.diagnosisList = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求诊断类型列表失败");
        }
      });
    },
    GetClinicalList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetClinicalList",
        }),
        method: "post",
      }).then((res) => {
        console.log("GetClinicalList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.clinicalList = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求临床分型列表失败");
        }
      });
    },
    GetMindList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetMindList",
        }),
        method: "post",
      }).then((res) => {
        console.log("GetMindList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.mindList = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求神志列表失败");
        }
      });
    },
    GetInfectiousOrderDetail(transferOrder) {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetInfectiousOrderDetail",
          transferOrder: transferOrder,
        }),
        method: "post",
      }).then((res) => {
        console.log("GetInfectiousOrderDetail", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.infectiousOrderDetail = obj.data;
            this.$store.dispatch("SaveTransferOrderDetail", obj.data);
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求传染病转运单详情失败");
        }
      });
    },
  },
  mounted() {
    let transferOrder = this.$store.state.transferOrder;
    let list = this.$store.state.remoteTransferOrderList;
    if (list.length == 0) {
      this.footer = TransferOrderFinishFooter;
    } else {
      let isHas = list.findIndex(q=>q.transferOrder==transferOrder);
      if (isHas>-1) {
        this.footer = TransferOrderUpFooter;
      } else {
        this.footer = TransferOrderFinishFooter;
      }
    }
    this.GetMedicalTypeList();
    this.GetDiagnosisList();
    this.GetClinicalList();
    this.GetMindList();
    this.GetInfectiousOrderDetail(transferOrder);
  },
  computed: {
    giveOxyWayList() {
      return this.$store.state.giveOxyWayList;
    },
    infuseWayList() {
      return this.$store.state.infuseWayList;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.infectious-order-detail >>> .el-radio__label {
  color: #fff;
  font-size: 20px;
}
.infectious-order-detail >>> .el-radio__inner {
  width: 21px;
  height: 21px;
}
.infectious-order-detail >>> .el-radio__inner::after {
  width: 10px;
  height: 10px;
}
.infectious-order-detail {
  height: 90%;
  display: flex;
  justify-content: center;
  padding-top: 2%;
}
.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  color: #fff;
  font-size: 20px;
}
.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  flex-grow: 1;
  background: url("../assets/image/content-bg.png") rgba(6, 53, 128, 0.2);
  background-size: 100% 100%;
}
.top-title {
  color: #fff;
  background: url("../assets/image/titlebg.png");
  background-size: 100% 100%;
  width: 300px;
  font-size: 21px;
  display: flex;
  justify-content: center;
  height: 54px;
  margin-top: -27px;
  line-height: 54px;
}
.section {
  width: 90%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.row {
  display: flex;
}
.column {
  display: flex;
  width: 25%;
}
.column2 {
  width: 50%;
}
.column3 {
  width: 75%;
}
.column4 {
  width: 100%;
}
.column > span:nth-child(1) {
  display: block;
  width: 40%;
  text-align: right;
  padding-right: 3%;
}
.column > span:nth-child(2) {
  display: block;
  width: 60%;
  border: solid 1px rgba(0, 181, 243, 0.7);
  background: rgba(6, 53, 128, 0.3);
  padding-left: 10px;
}
.column2 > span:nth-child(2) {
  width: 30%;
}
.column2 > span:nth-child(1) {
  width: 20%;
}
.column3 > span:nth-child(2) {
  width: 20%;
}
.column3 > span:nth-child(1) {
  width: 13.3333%;
}
.column4 > span:nth-child(2) {
  width: 15%;
}
.column4 > span:nth-child(1) {
  width: 10%;
}
.column .first-column {
  display: block;
  width: 24% !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.column2 .first-column {
  width: 12% !important;
}
.column3 .first-column {
  width: 8% !important;
}
.column4 .first-column {
  width: 6% !important;
}
.from-hospital,
.to-hospital {
  width: 88% !important;
}
.sex-radio {
  margin: 0 10px;
}
.ncp-test-result-title {
  width: 23% !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.confirm-hospital-title{
    width: 28% !important;
}
.is-travel-title {
  width: 50% !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.is-contact-title {
  width: 62% !important;
}
.day-title {
  width: 30% !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.is-worker-title {
  width: 33% !important;
}
.disease-history {
  width: 94% !important;
}
.check-body {
  width: 94%;
  border: solid 1px rgba(0, 181, 243, 0.7);
  display: flex;
}
.check-body > span {
  border-right: 1px solid rgba(0, 181, 243, 0.7);
  width: 20%;
  text-align: center;
}
.xorct-result-title {
  width: 28% !important;
}
.is-iv-infuse{
  margin-right: 20px;
}
.first,
.second,
.third,
.four,
.five,
.six,
.seven {
  border-bottom: solid 1px rgba(0, 189, 252, 0.1);
}
</style>